<template>
  <dl class="blk soaring_list">
    <dt>
      <div class="cver">
        <img :src="data.playlist.coverImgUrl" alt="" />
        <a
          href="/discover/toplist?id=19723756"
          class="msk"
          :title="data.playlist.name"
        ></a>
      </div>
      <div class="tit">
        <a href="/discover/toplist?id=19723756" :title="data.name">
          <h3 class="f-fs1 f-thide">{{ data.playlist.name }}</h3>
        </a>
        <div class="blk_btn">
          <a href="javascript:;" class="s-bg s-play" title="播放">播放</a>
          <a href="javascript:;" class="s-bg s-collection" title="收藏">收藏</a>
        </div>
      </div>
    </dt>
    <dd>
      <ol>
        <li
          v-for="(item, index) in data.playlist.tracks.slice(0, 10)"
          :key="item.id"
        >
          <span class="no " :class="{notop:index < 3}">{{
            index + 1
          }}</span>
          <a href="javascript:;" class="f-thide" :title="item.name">{{
            item.name
          }}</a>
          <div class="oper">
            <a href="javascript:;" class="s-bg s-bg-11"></a>
            <a href="javascript:;" class="s-bg-12"></a>
            <a href="javascript:;" class="s-bg s-bg-13"></a>
          </div>
        </li>
      </ol>
      <div class="checkMore">
        <a href="javascript:;">查看全部></a>
      </div>
    </dd>
  </dl>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  props: ["data"],
};
</script>
 
<style lang = "less" scoped>
.music_list .blk {
  float: left;
  width: 230px;
}

.music_list .blk dt {
  height: 100px;
  padding: 20px 0 0 19px;
}

.music_list .blk dt .cver {
  position: relative;
  width: 80px;
  height: 80px;
  float: left;
}

.music_list .blk dt .cver img {
  width: 100%;
  height: 100%;
}

.music_list .blk dt .msk {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/images/coverall.png") -145px -57px no-repeat;
}

.blk .tit {
  float: left;
  width: 116px;
  margin: 6px 0 0 10px;
}

.blk .tit a {
  color: #333;
}

.blk .tit a > h3 {
  font-size: 14px;
  margin: 0;
  font-weight: 700;
}

.blk_btn {
  margin-top: 10px;
}

.s-bg {
  background: url("../../assets/images/index.png") no-repeat;
}

.blk_btn a {
  display: block;
  float: left;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  text-indent: -9999px;
}

.s-play {
  background-position: -267px -205px;
}

.s-play:hover {
  background-position: -267px -235px;
}

.s-collection {
  background-position: -300px -205px;
}

.s-collection:hover {
  background-position: -300px -235px;
}

.blk ol {
  height: 319px;
  margin-left: 50px;
  line-height: 32px;
  margin-bottom: 0;
}

.blk ol li {
  height: 32px;
}

.blk ol li .no {
  float: left;
  position: relative;
  width: 35px;
  height: 32px;
  margin-left: -35px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.blk ol li .notop {
  color: #c10d0c;
}

.blk dd ol li a {
  width: 170px;
  height: 32px;
  color: #000;
  font-size: 12px;
  display: inline-block;
}

.blk dd ol li:hover a {
  width: 98px;
  display: inline-block;
  text-decoration: underline;
}

.blk dd ol li .oper a {
  float: left;
  width: 17px;
  height: 17px;
  margin-right: 10px;
}

.blk dd ol .oper {
  display: none;
  float: right;
  width: 82px;
  margin-top: 7px;
}

.blk dd ol li:hover .oper {
  display: block;
}

.s-bg-12 {
  background: url("../../assets/images/icon.png") 0 -699px no-repeat;
}

.s-bg-12:hover {
  background-position: -22px -699px;
}

.s-bg-11 {
  background-position: -267px -268px;
}

.s-bg-11:hover {
  background-position: -267px -288px;
}

.s-bg-13 {
  background-position: -297px -268px;
}

.s-bg-13:hover {
  background-position: -297px -288px;
}

.checkMore {
  clear: both;
  height: 32px;
  margin-right: 32px;
  text-align: right;
  line-height: 32px;
}

.checkMore a {
  color: #000;
  font-size: 12px;
}
</style>